02_03 Event Handling

Events

Let's take a look at how events work in Vue.js

Events with v-on

<div v-on:event="expression"></div>

The v-on directive can listen to the DOM and run some JavaScript when events are triggered.

The expression can be either regular javascript or a call to a method.

The event is a normal javascript event like as @click or @keyup or @blur

@ Shortcut

<div @event="myMethod()"></div>

methods: {
  myMethod(myEvent) {
    console.log(myEvent.target)
  }
}

Although the directive is technically v-on, you can shorten it by using the AT symbol and that's the way you'll normally see it used. If you use a method, the parenthesis are optional.

When called, it automatically passes along information about the event

...you can use that inside the method.

Passing Arguments

<div @event="myMethod(someVar, $event)"></div>
...
methods: {
  myMethod(myVar, myEvent) {
    console.log(myEvent.target)
  }
}

Of course you can also pass variables to the method if you want. If you still need to pass event info, you can send it with a special variable callend $event.

You can then capture that event into a javascript variable on your function.

Multiple Methods

<div @event="firstMethod, secondMethod"></div>

You can also have an event run multiple methods by separating them like arguments with commas.

Event Modifiers

.stopStop propagation .preventPrevent default behavior .captureCapture an inner element .self Only trigger on self events.onceTrigger only once
.passiveDon't call preventDefault

<div @event.stop.prevent="myMethod"></div>

Docsgo.raybo.org/2Czm

You can add one or more modifiers that control how the events are handled. These events are similar to the options you'd pass to a javascript event listener. So for example you can use prevent to stop a form from submitting.

You can pass along multiple modifiers, but be careful because the order makes a difference.

For more information look at the documentation for event listener parameters.

Key Modifiers

.enter .tab .delete .esc
.space .up .down .left .right

.ctrl .alt .shift .meta

<input @keyevent.ctrl.enter="submit" />

Some of the key methods have their own special modifiers

Note: the meta key is the command key on a mac and the windows key on a PC.

exact modifier

.exact

<div @event.modifier.exact="myMethod">A</div>

<button @click.ctrl.exact="myMethod">A</button>

There's a special modifier called exact. If you add it to an event, then it will only trigger our script if the combination matches exactly.

For example here, it would only execute myMethod if the ctrl key was pressed when the button was clicked. If you removed the modifier, then the method would only be called if no keys were pressed.

Mouse Modifiers

.left .right .middle

You can also check for clicks on specific buttons with the mouse button modifiers.

Docs go.raybo.org/2Czh

Practice

1. Create a cart array
2. Click plus to add items
3. Display cart items
4. Make cart icon toggle menu

bonus: Show cart total and qty on menu

Here's a good practice project. Here's the link to the starting code.

I have a simpler version of our previous code that displays our items.

First, create a currency filter that formats the number used for pricing so that they all have consistent decimal points. Apply that filter to the pricing of each item.

Next we want to display the amount of items the user has filtered when they change the max price.

However the original array never changes, but you can filter the array based on the choice and calculate the quantity properly.

That means that we'll need to change the array we're using in v-for with our new array.

It also means that we can remove the v-if statement that filters our display.

Use the new filtered array to display a label with the amount of elements based on the value of max.